<template>
	<view class="product-comments-box" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]"></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">评论列表</view>
		</view>
		<view class="navigation-position"></view>
		<view class="product-comments" v-if="total>0">
		  <view class="content">
		    <view class="head">
		      <view class="title">
		        <view class="name" >商品评价（{{ total }}）</view>
		        <view class="percent"></view>
		      </view>
		    </view>
		    <view class="comments">
		      <view class="item" v-for="(comment, index) in pageItems" :key="comment.id">
		        <view class="head">
		          <view class="user">
		            <image class="avatar" :src="comment.user_avatar_url"></image>
		            <view class="name">{{ comment.user_name }}</view>
		          </view>
		          <view class="operations">
								<image class="praise" v-if="comment.is_favor" src="/static/images/praise.png"></image>
								<image class="unpraise" v-else src="/static/images/unpraise.png" mode=""></image>
		          </view>
		        </view>
		        <view class="desc">{{ comment.content }}</view>
		        <view class="pictures" v-if="comment.images" @click="previewImage(index,comment.images)">
		          <image class="pic" v-for="(image, index) in comment.images" :key="index" :src="image"></image>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import Pagination from "mixins/Pagination"
	import {getComments} from "api/commentApi"

	export default {
		name: "index",
		mixins: [Pagination],
		store,
		computed:{
			...mapGetters([
				'statusBar'
			])
		},
		data: () => ({
			productId: null,
			initIndex:0,
			total:null
		}),
		methods: {
			async loadPageItems() {
				// {page: this.pageNumber, include: 'user'}
				let parms = {
					pid:this.productId,
					index:this.initIndex
				}
				return await getComments(parms)
			},
			async loadPageData() {
			    const response = await this.loadPageItems()
					if (response) {
						if(response.comments.length>0){
							if (this.initIndex === 0) {
							    this.pageItems = response.comments
							} else {
							    this.pageItems = [...this.pageItems, ...response.comments]
							}
							this.initIndex = this.pageItems.comments.length - 1;
							if(this.initIndex == 0){
								this.pageHasNoMore = true
							}
						}else{
							this.pageHasNoMore = true
						}
						this.total = response.total
					}
			},
			back(){
				uni.navigateBack()
			},
			previewImage(index,imgs) {
				uni.previewImage({
					current: index,
					urls: imgs
				})
			}
		},
		async onLoad(options) {
			this.productId = options.id
			await this.loadPageData()
		},
		async onReachBottom() {
		    if (this.pageHasNoMore) return
		    this.pageNumber += 1;
				
		    await this.loadPageData()
		}
	}
</script>

<style lang="scss" scoped>
	.product-comments-box{
		padding-bottom: 100rpx;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.hasBg{
		background: #F6F6F6;
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.product-comments {
		width: 710rpx;
		background: #FFFFFF;
		margin: 20rpx auto;
		box-shadow: 0 2rpx 12rpx 0 rgba(0,0,0,0.1);
		border-radius: 20rpx;
		.content {
			margin: 20rpx auto;
			padding: 20rpx 0;
			.head {
			display: flex;
			justify-content: space-between;
				.title {
					display: flex;
					justify-content: space-between;
			padding-left: 20rpx;
					.name {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
					.percent {
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.comments {
				.item {
			padding:20rpx 20rpx 0rpx 20rpx;
					margin-top: 20rpx;
			border-top: 1rpx solid #EEEEEE;
					.head {
						display: flex;
						justify-content: space-between;
						.user {
							display: flex;
							justify-content: space-between;
							.avatar {
								width: 68rpx;
								height: 68rpx;
								margin-right: 10rpx;
					border-radius: 50%;
							}
							.name {
								font-size: 28rpx;
								color: #333333;
								margin-top: 15rpx;
							}
						}
						.operations {
							.praise {
								width: 36rpx;
								height: 36rpx;
							}
							.unpraise{
								width: 46rpx;
								height:46rpx;
							}
						}
					}
					.desc {
						margin: 20rpx 0 20rpx 10rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 32rpx;
					}
					.pictures {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						.pic {
							width: 200rpx;
							height: 180rpx;
							margin:0 5rpx 15rpx 10rpx;
						}
					}
				}
			}
		}
	}
</style>
